<template>
  <div>
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    />
    <input
      type="file"
      name="file"
      id="uploadFileImg"
      ref="uploadFileImg"
      @change="changeFile($event, 'image')"
      style="opacity: 0; width: 0; height: 0; cursor: pointer"
    />
    <input
      type="file"
      accept="video/*"
      name="file"
      ref="uploadFileVideo"
      id="uploadFileVideo"
      @change="changeFile($event, 'video')"
      style="opacity: 0; width: 0; height: 0; cursor: pointer"
    />
  </div>
</template>

<script>
import Quill from "quill";
import VideoBlot from './utils/video.js';
import ImageResize from 'quill-image-resize-module'
Quill.register(VideoBlot);
Quill.register('modules/imageResize', ImageResize)

import { quillEditor } from "vue-quill-editor";
import { getToken } from "@/utils/auth";
import { imgDomain } from "@/configs/env";
import { lineHeightStyle } from "./utils/lineHeight";
import { toolbarOptions } from "./utils/toolbarOptions";
import uploadMixins from "@/mixins/upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  components: {
    quillEditor,
  },
  mixins: [uploadMixins],
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
  },
  watch: {
    value: {
      handler(val) {
        this.content = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      content: "",
      editorOption: {
        placeholder: "请输入内容...",
        theme: "snow", //主题 snow/bubble
        history: {
          delay: 1000,
          maxStack: 50,
          userOnly: false,
        },
        modules: {
          // 图片自定义大小
          imageResize: {   
             displayStyles: {
               backgroundColor: 'black',
               border: 'none',
               color: 'white'
             },
             modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              lineheight: (value) => {
                if (value) {
                  let quill = this.$refs.myQuillEditor.quill;
                  quill.format("lineHeight", value);
                }
              },
              image: function () {
                document.querySelector("#uploadFileImg").click();
              },
              video: function (val) {
                document.querySelector("#uploadFileVideo").click();
              },
            },
          },
        },
      },
      uploadType: "image",
    };
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady(quill) {
      Quill.register({ "formats/lineHeight": lineHeightStyle }, true);
    },
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    // 内容改变事件
    onEditorChange(val) {
      const { html } = val;
      this.$emit("input", html);
    },
    // 选择文件公用方法
    changeFile(event, type) {
      this.uploadType = type
      const files = event.target.files;
      if (!files.length) return;
      // 文件大小限制
      for (let i = 0; i < files.length; i += 1) {
        const file = files[i];
        if (file.size / 1024 / 1024 > 3) {
          this.$Message.error("请上传3MB以内的图片！");
          this.$refs.input.value = "";
          return;
        }
      }
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        this.upload(file, "oss", this.uploadCallback);
      }
    },
    // 上传文件 -- 成功回调
    uploadCallback(fileUrl) {
      let quill = this.$refs.myQuillEditor.quill;
      let length = quill.getSelection().index;
      const url = `${imgDomain}${fileUrl}`
      // 插入视频
      if (this.uploadType === "video") {
        quill.insertEmbed(length, "simpleVideo", {
          url,
          controls: "controls",
          width: "100%",
          height: "auto",
        });
      } else {
        quill.insertEmbed(length, this.uploadType, url);
      }
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
  },
};
</script>
<style>
.ql-container {
  font-size: 16px;
  min-height: 400px;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
  content: "行高";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before {
  content: "1";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.5"]::before {
  content: "1.5";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.75"]::before {
  content: "1.75";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before {
  content: "2";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3"]::before {
  content: "3";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="4"]::before {
  content: "4";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="5"]::before {
  content: "5";
}
.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}
</style>
